<template>
	<view class="whole">
		<u-toast ref="uToast" />
		<view class="">
			<block v-for="(item,index) in list.data" :key="index">
				<view class="listwhole" @click="tonewbackcard('../zhibibackcard/zhibibackcard',item.zfb_account)">
					<view class="list_left">
						<image src="../../static/bank_card.png" mode="" class="list_left_img" v-if="item.bank_card_phone"></image>
						<image src="../../static/alipay_background.png" mode="" class="list_left_img2" v-if="item.zfb_account"></image>
						<view class="list_left_right">
							<text>{{item.real_name}}</text>
							<text>{{item.bank_card_number}}</text>
              <text>{{item.zfb_account}}</text>
						</view>
					</view>
        <view class="list_right_img">
          <image src="../../static/jiantou.png" mode="" class="list_right_img"></image>
        </view>
				</view>
				
			</block>
			
			<view class="listwhole" @click="tonewbackcard('../zhibibackcard/zhibibackcard')" v-if="backcardstate">
				<view class="list_new">
					<image src="/static/add_icon.png"  class="list_new_img">
					<text>绑定银行卡</text>
				</view>
			</view>

      <!-- <view class="listwhole" @click="tonewbackcard('../alipay_binding/alipay_binding')" v-if="allpaystate">
				<view class="list_new">
					<image src="/static/add_icon.png"  class="list_new_img">
					<text>支付宝收款</text>
				</view>
			</view> -->
      
			
		</view>
		<u-modal v-model="show" :content="content" @confirm='confirm' @cancel='cancel' :show-cancel-button="true" ></u-modal>
	</view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      list: {
        data: [],
      },
      page: 1,
      show: false,
      content: "请确定是否删除",
      pagestate: false,
      backcardstate: true,
      allpaystate: true,
    };
  },
  onReachBottom() {
    this.page++;
  },
  onShow() {
    this.getuserWallet();
  },
  onPullDownRefresh() {
    this.page = 1;
    uni.stopPullDownRefresh();
  },
  methods: {
    async getuserWallet() {
      let res = await api.userWallet({ method: "get", loading: "加载中" });

      if (res.code === 0) {
        uni.setStorageSync("walletid", res.data.id);
        this.list.data = res.data.payment_method;
        this.backcardstate = true;
        this.allpaystate = true;
        this.list.data.forEach((el) => {
          if (el.bank_card_number) {
            // el.bank_card_number = el.bank_card_number.replace(/^(\d{4})\d+(\d{4})$/,"$1 **** **** $2");
            this.backcardstate = false;
          }
          if (el.zfb_account) {
            // el.zfb_account = el.zfb_account.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
            this.allpaystate = false;
          }
        });

        let walletcard = JSON.stringify(res.data.payment_method);
        uni.setStorageSync("walletcard", walletcard);
      } else {
        tip.defaults(res.msg);
      }
    },
    cancel() {
      this.show = false;
    },
    async confirm() {
      let res = await api.unBindCard({
        query: {
          id: this.list.data[0].id,
        },
        method: "post",
      });
      if (res.code == 0) {
        this.$refs.uToast.show({
          title: "删除成功",
          type: "succes",
        });
      }
    },
    tonewbackcard(url, zfb_account) {
      if (zfb_account) {
        url = "../alipay_binding/alipay_binding";
      }
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
  padding: 1rpx 0;
  .listwhole {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 24rpx;
    background: $bg-color3;
    // background-image: url("/static/bank_card_img.png");
    // background-repeat: no-repeat;
    // background-position: center;
    // background-attachment: fixed;
    // background-size: cover;
    // -webkit-background-size: cover;
    // -moz-background-size: cover;
    // -o-background-size: cover;
    .list_left {
      display: flex;
      .list_left_img {
        width: 72rpx;
        height: 90rpx;
      }
      .list_left_img2 {
        width: 80rpx;
        height: 80rpx;
      }
      .list_left_right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 30rpx;
        color: #ffffff;
        font-size: 28rpx;
      }
    }
    .list_right_img {
      width: 60rpx;
      height: 60rpx;
      // margin-top: 15rpx;
    }
    .list_new {
      color: #ffffff;
      margin: 0 auto;
      .list_new_img {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
